<template>
    <el-skeleton style="width: 240px" :loading="loading" animated>
      <template #template>
        <el-skeleton-item variant="image" style="width: 240px; height: 240px" />
        <div style="padding: 14px">
          <el-skeleton-item variant="h3" style="width: 50%" />
          <div
            style="
              display: flex;
              align-items: center;
              justify-items: space-between;
              margin-top: 16px;
              height: 16px;
            "
          >
            <el-skeleton-item variant="text" style="margin-right: 16px" />
            <el-skeleton-item variant="text" style="width: 30%" />
          </div>
        </div>
      </template>
    <template #default>
      <div class="detail" >
        <header>
         <div class="img">
          <img :src="url" alt="">
         </div>
          <div class="title">
            <ul>
              <div>
                <span>电台节目</span>
              </div>
              <h2>{{ name }}</h2>
            </ul>
            <aside>
              <el-icon>
                <Headset />
              </el-icon>
              <a>{{ title }}</a>
              <el-button @click="prompt">         
              订阅
              </el-button>
            </aside>
    
          </div>
        </header>
        <main>
          <!-- 一排 按钮 -->
          <div class="button">
            <el-button size="large" @click="prompt">
              <el-icon>
                <VideoPlay />
              </el-icon> 播放时间 &nbsp; {{timestampToTime(playTime).slice(14)}}
            </el-button>
            <el-button size="large" @click=thumbs>
              <el-icon>
                <Sunny />
              </el-icon > 点赞 &nbsp; ({{ likedCount }})
            </el-button>         
            <el-button size="large" href='#roll'>
              <el-link href="#roll" @click="fff=true" :fff="fff" :num="num">
                <div>     
                  <el-icon><MostlyCloudy /></el-icon> 
                    留言({{ commentCount }})
                </div>
              </el-link>
            </el-button>                        
            <el-dropdown>
              <el-button size="large" @click="talk"><el-icon><Download /></el-icon> 下载</el-button>
              <template #dropdown>
                <el-dropdown-menu >
                  <el-dropdown-item 
                  v-for="item in tableData" 
                  :key="item.id"
                  @click="DownSong(item.id)"
                  >
                  <a :href="downUrl||''" download="qq.mp3"> {{ item.name}}</a>                 
                </el-dropdown-item>   
                 
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <!-- <el-button size="large">
              <el-icon>
                <VideoPlay />
              </el-icon>
              <a> 生成外链播放器</a>
            </el-button> -->
          </div>
          <!-- 脱口秀 数据 -->
          <div class="talk-show">
            <el-button style="color:red;border:1px solid red"> 脱口秀 </el-button>
            <p>{{ title }}</p>
            <p>第{{ serialNum }}期</p>
            <p>{{ timestampToTime(createTime).slice(0, 10) }} 创建</p>
            <ul>
              <p>播放：</p>
              <p>{{ listenerCount }}</p>
              <p>次</p>
            </ul>
          </div>
          <!-- 描述 -->
          <div class="description" style="white-space:pre-wrap">
            {{ description }} 
          </div>
    
          <!-- 折叠 音乐 框 -->
          <div class="collapse" v-show="tableData.length === 0 ? false : true">
            <el-collapse>
              <!-- 折叠 -->
              <el-collapse-item>
                <!-- #title 面板标题 -->
                <template #title>
                  <p style="color:blue;">节目包含歌曲列表 ({{ tableData.length }}首歌)</p>
                </template>
    
                <el-table :data="tableData" stripe style="width: 100%" max-height="500">
                  <el-table-column type="index" width="80" label="序号" />
                  <el-table-column width="80">
                    <template #default="{ row }">
                      <el-button :circle=true size="small" style="font-size:26px;border:none" class="vio">
                        <el-icon @click="getAudioInfo(row.id)">
                          <VideoPlay />
                        </el-icon>
                      </el-button>
                    </template>
                  </el-table-column>>
                  <el-table-column prop="name" label="歌曲名" width="180"  >
                    <template #default="{ row }">
                      <p class="labelP vio" @click="drawer=true;getAudioInfo(row.id)">{{ row.name }}</p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="id" label="ID" width="180" />
                  <el-table-column prop="duration" label="时长" width="180">
                    <template #default="{ row }">
                      <p>{{ timestampToTime(row.duration).slice(14) }}</p>
                    </template>
                  </el-table-column>>
                  <el-table-column prop="artists[0].name" label="作者" width="180" />
                  <el-table-column prop="name" label="专辑" width="180" />
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </div>
          <!-- 抽屉 -->
          <el-drawer
            v-model="drawer"
            :direction="direction"
            size="90%"             
          >
          <template #header>
              <div style="height:40px;margin-top: -20px;color:rgba(255, 0, 0, 0.5) ">
                <h2>音乐播放器</h2>
              </div>
          </template>
          <div class="songbox">
    
            <h2 style="color:red ">{{songname }}</h2>
            <h3>{{ songartist }}</h3>
            <div class="songbox-main">
              <div class="box-left">
                <img class="songdetail-img" :src="picUrl" alt="" >
                <audio controls="controls" loop="loop" preload="auto" :src="songUrl"> 你的浏览器不支持audio标签
                </audio>
              </div>
              <div class="box-right">
                  <button v-if="flag" @click=" flag = !flag;getsongwords(lyric) "
                    style="cursor: pointer;">获取歌词</button>
                  <!-- 保留空白符序列，但是正常地进行换行。 -->
                  <div v-else class="lyricPanel"  style="white-space: pre-wrap;" >           
                    {{ this.resss }}
                  </div>
              </div>
            </div>
    
    
          </div>
          </el-drawer>
          <!-- 评论 与 用户评论 组件 -->
          <div class="remark" id="roll">
            <djRemark></djRemark>
          </div>
        </main>
      </div>
    </template>
  </el-skeleton>>


</template>

<script>
import djRemark from '@/views/dj/djProgramRemark.vue'
import { songUrlInterface, lyricsInterface, songDetailsInterface } from '@/api/artist'
import { timestampToTime } from '@/utils/date'
import { VideoPlay, Headset,  Sunny, MostlyCloudy,Download,} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { djProgramDetails,djSongDown } from '@/api/dj'
import { mapState, mapMutations } from 'vuex'
export default {
  components: {
    VideoPlay, Headset,  Sunny, MostlyCloudy,djRemark,Download,
  },
  data() {
    return {
      // 抽屉
      drawer:false,
      direction:'rtl',
      url: null,
      // --
      description:'',
      name: '',
      createTime: '',
      serialNum: '',
      title: '',
      likedCount: '',
      commentCount: '',
      listenerCount: '',
      tableData: [],
      playTime:'',
      // 歌曲
      songname:'',
      songartist:'',
      // lyric:'',
      picUrl:'',
      songUrl:'',
      flag:true,
      //点赞
      t:2,
      // dj
      djId:'',
      loading:true,
      // 下载音乐
      downUrl:'',
      
      fff:false,
      num:1


    }
  },
  computed: {
    ...mapState('djProgramModule', ['programId']),
    ...mapState('playListModule', ['audioInfo', 'songInfo', 'lyric'])
  },
  methods: {
    // 是否 有音乐
    talk(){
      console.log(111111);
      if(this.tableData.length === 0){
        ElMessage('没有可以下载的资源')
      }
    },
    // 下载 音乐
    DownSong(key){
      console.log(key,'key');
      djSongDown({id:key}).then(res=>{
        this.downUrl=res?.data[0]?.url
        console.log(this.downUrl,'12345');
        // 判断是否下载的提示信息
      
        if(res?.data[0]?.url ){
          ElMessage({
            message:'开始下载',
            type: 'success',          
          })         
        }else{
          ElMessage({
            message:'下载失败' ,         
          })
        }
      })
    },
    // 评论 滚动位置
    run(){
      document.querySelector("#roll1").scrollIntoView(true)
    },
    // 提示信息
    prompt(){
      ElMessage({
            message: '没有下载资源',
          
          })
    },
    // 点赞
    thumbs(){
      // 点赞
      this.t ===1? this.t = 2 : this.t=1
      
    },

    ...mapMutations('playListModule', ['SET_LYRIC', 'SET_AUDIO_INFO']),
    // 获取 电台节目 详情
    getProgramDetails(id) {
      djProgramDetails({ id }).then(res => {
        console.log('电台节目 详情',res)
        // console.log('res.program',res?.program.commentThreadId);// commentThreadId: "A_DJ_1_2520921507"
        this.url = res?.program.coverUrl
        this.name = res?.program.name
        this.createTime = res?.program.createTime
        this.serialNum = res?.program.serialNum;
        this.title = res?.program.dj.brand
        this.likedCount = res?.program.likedCount
        this.commentCount = res?.program.commentCount
        this.listenerCount = res?.program.listenerCount
        this.description = res?.program.description
        this.tableData = res?.program.songs
        this.playTime = res.program.mainSong.bMusic.playTime
        this.djId = res.program.mainSong.bMusic.id
       
        //  骨架屏等待数据
        this.loading=false

        // console.log('dj的id',this.djId);
        console.log('tableData',this.tableData);  //  全部歌曲数据
      })
    },
    // 此处调用播放音乐\接口、组件 
    async getAudioInfo(id) {
      // console.log('音乐id',id);

      songUrlInterface({ id, level: 'standard' })
        .then(async (res) => {

          // 歌曲 信息（MP3 URL ）
          this.songUrl = res?.data?.[0].url
           console.log('songURL DATA',res);
          songDetailsInterface({ ids: id }).then(res => {
           
            // 歌曲 信息(名字 作者 图片)
            this.songname = res.songs[0].name
            this.songartist = res.songs[0].ar[0].name
            this.picUrl = res.songs[0].al.picUrl          
          })

          // 歌词 接口
          await lyricsInterface({ id }).then(res => {
            this.SET_LYRIC(res.lrc.lyric)
            // 歌曲 歌词
            this.lyric = res.lrc.lyric

          })
          this.SET_AUDIO_INFO({
            // 歌曲id
            id,
            // 歌名
            name: this.songname || '',
            //  作者名
            artist: this.songartist || '',
            // 音乐地址
            url: res?.data?.[0].url,
            // 音乐封面
            cover: this.picUrl || '',
            // 歌词
            lrc: this.lyric || ''
          })
        })
    },
    // 切割 歌词
    getsongwords(lyric) {
      const songwords = lyric?.split('\n')
      const result = songwords?.map((item) => item.substring(11))
      this.resss = result.join("\n")
      
    },
  },
  watch:{
    // 观察 品论
    // t(value){
    //   djProgramThumbs({type:7 ,t:value,id:this.programId }).then(res=>{
    //     // console.log(res);
    //     this.getProgramDetails()
    //     // console.log( this.likedCount)
    //   })
    // }
    fff(newvalue,oldvalue){
      console.log(newvalue,oldvalue);
    }
  },
  created() {
    this.getProgramDetails(this.programId)
    // 时间戳组件
    this.timestampToTime = timestampToTime

  },
  mounted(){
   

  }
}
</script>

<style lang="scss" scoped>
a{
  text-decoration: none;
  // color: black;
}
.vio{
  cursor: pointer;
}
.detail {
  margin: 40px;

  display: flex;
  flex-flow: column;

  header {
    display: flex;
    flex-direction: row;

    .img{
      display: flex;
      width: 200px;
      height: 200px;
      margin-right: 20px;
    }

     
      
    }

    .title {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-top: 30px;

      ul {
        display: flex;

        div {
          border: 1px solid red;
          background-color: red;
          color: aliceblue;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100px;
          height: 60px;
        }

        h2 {
          font-size: 24px;
        }
      }

      aside {
        display: flex;
        margin-top: 30px;

        a {
          margin: 0 20px;
        }
      }
    }
  }

  main {
    display: flex;
    flex-direction: column;

    .button {
      display: flex;
      margin: 30px;

      button {
        margin-right: 20px;
      }
    }

    .talk-show {
      display: flex;
      align-items: center;
      margin-bottom: 30px;

      ul {
        display: flex;
      }

      p {
        margin: 0 10px;
      }
    }

    .description {
      margin-bottom: 30px;
    }
  }


.labelP:hover{
  text-decoration: underline;
  font-weight: 900;
}
// 音乐详情 - 抽屉
.songbox {
  background-color: rgb(194, 194, 194);
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: -30px 30px 30px 30px;
}
h2 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 20px;
  margin-top: 20px
}
h3 {
  text-align: center;
  font-size: 18px;
  margin-bottom: 20px;
}
.songdetail-img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 20px solid #2e2e2e;
  padding: 20px;
  background-color: #666;
  margin-bottom: 30px;
  margin-top: 30px;
}
.songbox button {
  width: 250px;
  height: 50px;
  background-color: #b0aeae;
  border: 1px solid #666;
  border-radius: 5px;
  font-size: 20px;
  color: #5f5e5e;
}
audio {
  height: 50px;
}
.songbox-main {
  display: flex;
}

.box-left {

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  flex: 1;
}
.box-right{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.lyricPanel {
  width: 350px;
  height: 450px;
  // border: 1px solid rgb(136, 130, 130);
  border-radius: 10px;
  overflow-y: scroll;
  color: #2e2e2e;
  line-height: 18px;
  margin-top: 20px;
  position: relative;
  left: 20px;
}
.remark{
  margin-top: 30px;
}
</style>




